<template>
  <div class="el-main-right">
    <div class="el-main-right-top el-main-right-top-border">
      <div class="el-main-right-top-booton">
        <div class="dengluzhuce">
        重置密码
        </div>
      </div>
    </div>
    <div class="el-main-right-con">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入邮箱" v-model="ruleForm.email"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


    <script>
export default {
  data() {
    var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
   
  var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (reg.test(value)==false) {
          callback(new Error("请正确格式"));
        } else {
          if (value < 11) {
            callback(new Error("必须11位数"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    
  

    return {
   
      note: {
        backgroundImage: "url(" + require("../../assets/beijing.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "25px auto",
        marginTop: "5px"
      },
      ruleForm: {
        email:""
      },
      rules: {
       
       
      
        email: [{ validator: checkEmail, trigger: "blur" }]
      }
    };
  },
  methods: {

submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
         this.$http
        .get("http://localhost:8001/user/getemail", { params: { uemail: this.ruleForm.email } })
        .then(function(data) {
          console.log(this.ruleForm.email);
          console.log(data.bodyText);
          if (data.bodyText == "success") {           
          
              this.$message({
          showClose: true,
          message: '请前往邮箱修改'
        });
          } else {
          
              this.$message({
          showClose: true,
          message: '邮箱未激活或邮箱不存在',
          type: 'warning'
        });
          }
        });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>


<style scoped>
.dengluzhuce{
  color: #4FC3F7;
  font-size: 25px;
  font-weight: bolder;

}
a{
  text-decoration: none;
  color: #4FC3F7;
}
.el-header {
  background-color: greenyellow;
  color: #333;
  text-align: center;
  line-height: 150px;
  font-family: "STXingkai";
  font-size: 50px;
  position: relative;
}
.el-header-area {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  font-family: "STXingkai";
  font-size: 50px;
  line-height: 150px;
  position: absolute;
  height: 150px;
  width: 80%;
  right: 150px;
  top: 50px;
}

.el-header-left {
  position: absolute;
  left: 230px;
}
.el-header-img {
  position: absolute;
  left: 60px;
}
/* ********************************* */

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  position: relative;
}

.el-main-right {
  height: 700px;
  width: 500px;
  background-color: #ffffff;
  position: relative;
  margin-left: 180px;
}
.el-main-right-con {
  position: absolute;
  top: 150px;
}
.el-main-right-top {
  position: absolute;
  width: 500px;
  height: 100px;
}
.el-main-right-cencer {
  position: absolute;
  top: 300px;
  right: 80px;
  font-size: 15px;
  color: #82b1ff;
}
.el-main-right-footer {
  position: absolute;
  top: 430px;
  right: -110px;
  font-size: 15px;
  color: #82b1ff;
}
.el-main-right-top-booton {
  position: absolute;
  left: 10px;
  top: -25px;
}
.el-main-right-top-border {
  border-bottom: 3px solid #969696;
}
.el-main-footer {
  position: absolute;
  left: 200px;
}

.el-main-left {
  height: 700px;
  width: 500px;
  background-color: #ffffff;
  position: relative;
  margin-left: 880px;
  margin-top: -700px;
}
.el-left-img {
  position: absolute;
  left: 160px;
  top: 130px;
}
.el-left-img-small {
  position: absolute;
  left: 130px;
  top: 300px;
}

.el-left-ziti {
  position: absolute;
  left: 180px;
  top: 270px;
}
.el-left-ziti1 {
  position: absolute;
  left: 180px;
  top: 290px;
}
.el-left-ziti2 {
  position: absolute;
  left: 140px;
  top: 340px;
  font-size: 20px;
  font-weight: 300;
}
.el-left-ziti3 {
  position: absolute;
  left: 180px;
  top: 370px;
  font-size: 20px;
  font-weight: 300;
}

/* .border {
  border: 1px solid red;
} */
body > .el-container {
  margin-bottom: 0px;
  margin-top: 0px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.input-area{
  width: 180px;
}
.celect-area{
height: 30px;

}
.celect-ziti{
 position: absolute;
 left: -100px;
 top: -21px;

}
</style>
    
    
    
    


